<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <style>
      div,
      header,
      main,
      img,
      span,
      h3 {
        margin: 0px;
        padding: 0px;
      }

      #wrapper {
        width: 960px;
        margin: 30px auto;
      }

      #goods-info {
        position: absolute;
        left: 360px;
        top: 0px;
        z-index: 100;
      }

      header {
        margin: 30px 0px;
      }

      main {
        position: relative;
      }

      #preview {
        position: absolute;
        z-index: 101;
      }

      #normalView {
        /* border:1px solid red; */
        cursor: move;
        position: relative;
      }

      .mask {
        width: 100px;
        height: 100px;
        background: blue;
        opacity: 0.4;
        position: absolute;
        display: none;
      }

      #enlargeView {
        position: absolute;
        left: 360px;
        top: -25px;
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;
        overflow: hidden;
        display: none;
        background: url("images/notebook-big.jpeg") no-repeat white;
      }
    </style>
    <title>Document</title>
  </head>

  <body>
    <div id="wrapper">
      <header>
        <h2>图片预览效果实现(第1阶段)</h2>
      </header>
      <main>
        <div id="preview">
          <div id="normalView">
            <img src="images/notebook.jpeg" width="350" height="350" />
            <div class="mask"></div>
          </div>
          <div id="enlargeView"></div>
        </div>
        <div id="goods-info">
          <img src="images/price-info-600-650.png" width="600" height="650" />
        </div>
      </main>
    </div>
  </body>
</html>
